<template>
	<!-- stripe:是否为斑马纹 table; -->
	<!-- border:是否带有纵向边框; -->
	<!-- fit:列的宽度是否自撑开; -->
	<!-- highlight-current-row:是否要高亮当前行; -->
	<el-table :data="tableData" border stripe fit
		ref="multipleTable"
		highlight-current-row
		:height="tabheight"
		:header-cell-style="headClass"
		@row-dblclick="rowDblclick"
	>
		<!-- 是否显示序号栏，sortShow控制 -->
		<el-table-column label="序号" align="center" type="index" width="50" v-if="sortShow"> </el-table-column>
		<!-- 是否需要全选， isshow控制-->
		<el-table-column v-if="isshow" type="selection" align="center" fixed></el-table-column>
		<!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值),
		oper: 是否有操作列, oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
		<el-table-column v-for="(th, key) in tableHeader"
			:key="key"
			:prop="th.prop"
			:label="th.label"
			:fixed="th.fixed"
			:width="th.width"
			:min-width="th.minWidth" 
			:align="th.align"
			>
			<!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，这里操作一栏的名字定死（oper表示是操作这一列，否则就不是） -->
			<template slot-scope="scope">
				<div v-if="th.oper">
					<el-button v-for="(o, key) in th.oper"
						:key="key" @click="o.clickFun(scope.row)"
						:type="o.style"
						:icon="o.icon"
						:plain="true"
						size="small">{{o.name}}
					</el-button>
				</div>
					<!--formatData：自定义过滤器-->
					<div v-else>
						<span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
						<span v-else>
							<span>{{ scope.row[th.prop]}}</span>
						</span>
					</div>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		name: "index",
		// 传入的数据
		props: {
			tableData: { // 表格数据
				type: Array,
				default: function () {
					return []
				}
			},
			rowDblclick: { // 单行点击事件
				type: Function,
				default: (row, event, column) => {
					console.log('default: ' + row + '---' + event + '---' + column)
				}
			},
			// 单元格hover进入时事件
			// 单元格hover退出时事件
			tableHeader: { // 表格头部
				type: Array,
				default: function () {
					return []
				}
			},
			tabheight: {
				type: String,
				default: '100%'
			},
			isshow: {
				type: Boolean,
				default: false
			},
			sortShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.$refs.multipleTable.doLayout()
			})
		},
		methods: {
			// 获取选择行数信息
			getmydata() {
				let data = this.$refs.multipleTable.selection
				let IDS = []
				for (let i = 0; i < data.length; i++) {
					IDS.push(data[i].ID)
				}
				this.$emit('func', IDS)
			},
			// 表头样式设置
			headClass () {
			  return 'text-align:center;background:#ebeced;'
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-button{
		border: none;
		background: transparent;
		color: #0177d5;
	}
	.repeatContentBox{
		width: 80%;
		min-height: 100px;
		bottom: 60px;
		left: 10%;
		padding: 15px;
		background: #f7f7f7;
		border-radius: 5px;
		.repeatContent{
			-webkit-line-clamp: 15;
		}
		.sanjiao_down{
			width:0;
			height:0;
			overflow:hidden;
			font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
			line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 20px solid #f7f7f7;
			bottom: -20px;
			left: 20%;
		}
	}
</style>
<style lang="less">
	.el-table-column{
		position: relative;
	}
</style>